<template>
	<div class="complaint">
		<h4 class="bg-f5 pt30rem pb30rem pl10rem pr10rem">请如实填写一下该信息，我们会严格检查</h4>
		<ul class="bg-white fs28rem pl30rem pr30rem">
			<li class="pt30rem pb30rem border-b layout flex-left">
				<label>平台：</label>
				<input type="text" placeholder="请输入您是在哪个平台看到的" v-model="form.platform">
			</li>
			<li class="pt30rem pb30rem border-b layout flex-left" >
				<label>名称：</label>
				<input type="text" placeholder="该商品在该平台上的名称是什么" v-model="form.platform_goods_name"> 
			</li>
			<li class="pt30rem pb30rem border-b layout flex-left">
				<label>链接：</label>
				<input type="text" placeholder="是否有链接提供" v-model="form.link">
			</li>
			<li class="pt30rem pb30rem layout flex-left">
				<label>图片：</label>
				<input type="text" placeholder="您可以添加截图" disabled="disabled" >
			</li>	
			<li class="pl30rem pr30rem pt30rem pb30rem align-left mb40rem">
				<div class="mb15rem flex-left flex-w">
					<div v-for="(img,index) in imgArray" class="evaluate-img mb25rem border mr40rem">
						<img :src="img" class="responsive-img">
						<button class="delete-img" @click="removeImg(index)">×</button>
					</div>	
					<div class="upload-img bg-f5 white fs32" 
							@click="uploadImg" 
							v-show="imgArray.length < 6"
						>
						<input type="file" id="img" name='avatar' @change="uploadFile" class="hide">					
					</div>
				</div>
				
				<div class="align-right mt20rem">
					<small class="c999">
						图片最多上传6张
					</small>
				</div>					
			</li>		
		</ul>			
		<button class="white cxo-red align-center pt20rem pb20rem block auto circle-8" @click="submit" style="width:92%; margin-top:40%;">提交</button>
	</div>
</template>

<script>
import	{ commitComplain } from '@/api/goods-detail';
import { uploadAvatar } from "@/utils";
	export default{
		data()
		{
			return{
				form : {
					goods_id            : this.$route.query.goods_id,
					uid                 : window.localStorage.getItem('uid'),
					platform            : '',
					platform_goods_name : '',
					link                : '',
					images              : ''
				},
				imgArray : []
			}
		},
		methods:
		{
			submit()
			{
				commitComplain(this.form).then(res => {
					this.$router.go(-1)
				}) 
			},
			uploadImg()
			{
				document.getElementById("img").click();	
			},
			uploadFile()
			{
				uploadAvatar("img", res => {
					this.imgArray.push(res);
					this.form.images = this.imgArray.join('|');
				});
			},
			removeImg(index)
			{
				this.imgArray.splice(index,1);
			},

		}
	}
</script>

<style lang="less">
	.complaint{
		.upload-img{
			width: 160/28rem;
			height: 160/28rem;
			position: relative;
		}
		.evaluate-img{
			width: 160/28rem;
			height: 160/28rem;
			position: relative;
		}
		.upload-img:after{
			position: absolute;
			content: '+';
			display: inline-block;
			font-size: 3rem;
			color: #999;
			font-weight: 200;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		};
		.delete-img{
			display: inline-block;
		    position: absolute;
		    width: 20px;
		    height: 20px;
		    background-color: #ccc;
		    border-radius: 100%;
		    color: #eee;
		    right: -1rem;
		    top: -1rem;
		}
		.hide{
			display: none;
		}
	}
</style>
